<template>
  <div>
    <a-row type="flex" justify="center">
      <a-radio-group :value='architextQueryType' defaultValue="yyyy" @change="handleConditionChange" buttonStyle="solid"
                     style="margin: 20px 0 20px 0;">
        <a-radio-button value='yyyy'>年度归档</a-radio-button>
        <a-radio-button value='yyyyQ'>季度归档</a-radio-button>
        <a-radio-button value='yyyyMM'>月度归档</a-radio-button>
      </a-radio-group>
    </a-row>
    <a-row type="flex" justify="center">
      <a-col :span="24" style="text-align: center">
        <a-timeline mode="alternate">
          <template v-for="item in architectData.records">
            <a-timeline-item>
              <a-icon slot="dot" type="clock-circle-o" style="font-size: 24px;"/>
              <span style="font-weight: bold;font-size: 20px;">{{item.archiveTime}}</span>
            </a-timeline-item>
            <!--时间归档的博客列表信息-->
            <a-timeline-item v-for="blog in item.timelineItems" :key="blog.id">
              <div style="font-weight: bold;font-size: 20px;">
                <a @click="timelineClick(blog)">{{blog.title}}</a>
              </div>
              <div>
                <a key="folder" style="color: gray;">
                  <a-icon type="folder"/>
                  {{blog.category.name}}</a>
                <a utton v-for="tag of blog.tags" style="color: gray">
                  <a-icon type="tag"/>
                  {{tag.name}}
                </a>
              </div>
            </a-timeline-item>
          </template>
        </a-timeline>
        <a-button v-if="loadPageNo<architectData.pages" type="primary" @click="loadingMoreClick" :loading="loadingMore">
          加载更多
        </a-button>
      </a-col>
    </a-row>
  </div>

</template>
<script>
  import { blogArchitectQuery } from '@/api/blog'
  import _ from 'lodash/core'
  import ACol from 'ant-design-vue/es/grid/Col'

  export default {
    components: { ACol },
    data() {
      return {
        loadingMore: false,
        loadPageNo: 1,
        architextQueryType: 'yyyy',//查询类型
        architectData: {}//博客归档查询结果数据
      }
    },
    methods: {
      timelineClick(blog) {
        this.$router.push(`/blog/page/${blog.blogId}`)
      },
      handleConditionChange(e) {
        this.loadPageNo = 1
        this.architectData = {}
        this.architextQueryType = e.target.value
        this.queryArchitectRequest()
      },
      /**
       * 点击加载更多归档信息
       */
      loadingMoreClick() {
        this.loadPageNo++
        this.queryArchitectRequest()
      },
      /**
       * 博客归档查询请求
       */
      queryArchitectRequest() {
        this.loadingMore = true
        blogArchitectQuery(this.architextQueryType, this.loadPageNo).then((res) => {
          this.loadingMore = false
          if (res.code === '200') {
            if (_.isEmpty(this.architectData)) {
              this.architectData = res.data
            } else {
              _.forEach(res.data.records, (item) => {
                this.architectData.records.push(item)
              })
            }
          }
        }).catch((err) => {
          this.$message.error('归档信息查询失败.')
        })
      }
    },
    created() {
      this.queryArchitectRequest()
    }
  }
</script>

<style scoped>

</style>
